<!DOCTYPE html>
<html lang="en">                          
  <head>                                            
    <meta charset="utf-8">                                            
    <title>Proyecto Desarrolladores                                        
    </title>                                            
    <meta name="viewport" content="width=device-width, initial-scale=1.0">                                            
    <meta name="description" content="">                                            
    <meta name="author" content="">                                            
    <!-- Le styles -->                                                    
    <link href="css/bootstrap.css" rel="stylesheet">                                            
    <style type="text/css">      body {         padding-top: 130px;         padding-bottom: 40px;       }                                             
    </style>                                            
    <link href="css/bootstrap-responsive.css" rel="stylesheet">                                            
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->                                                    
    <!--[if lt IE 9]>
                                          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
                                        <![endif]-->                                                    
    <!-- Le fav and touch icons -->                                                    
    <link rel="shortcut icon" href="ico/favicon.ico">                                            
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">                                            
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">                                            
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">                                            
    <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">                          
  </head>                          
  <body>                                            
    <div class="navbar navbar-fixed-top">                                                              
      <div class="navbar-inner">                                                                            
        <div class="container">                                                                                   
          <a class="brand" href="#">Proyecto Bootstrap - DEW 2012</a>                                                                     
        </div>                                                                                 
        <div class="container">                                                                                                          
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">                                                                                                                        
            <span class="icon-bar">                                                                                                       
            </span>                                                                                                                    
            <span class="icon-bar">                                                                                                       
            </span>                                                                                                                    
            <span class="icon-bar">                                                                                                       
            </span>          </a>                                                                                                                     
          <div class="nav-collapse">                                                                                                                    
            <ul class="nav">                                                                                                                                      
              <li>                                                                                                                                 
              <a href="index.html">Bootstrap</a>                                                                                                                       
              </li>                                                                                                                                      
              <li  class="active">                                                                                                                             
                <a href="adicional.html">&iquest;Por qu&eacute; usar?</a>                                                                                                                       
              </li>                                                                                                                                      
              <li>                                                                                                                       
              <a href="ejemplos.html">Ejemplos</a>                                                                                                                       
              </li>                                                                                                                                      
              <form class="navbar-search pull-left">                                                                                                                                                          
                <input type="text" class="search-query" placeholder="Buscar">                                                                                                                                      
              </form>                                                                                                                                                     
            </ul>                                                                                                       
            <form class="form-inline pull-right">                                                                                                                              
              <input type="text" class="input-small" placeholder="Usuario">                                                                                                                              
              <input type="password" class="input-small" placeholder="Contrase&ntilde;a">                                                                                                                              
              <label class="checkbox">                                                                                                                                              
                <input type="checkbox"> Recordarme                                                                                                                               
              </label>                                                                                                                              
              <button type="submit" class="btn">Sign in                                                                                                                          
              </button>                                                                                                              
            </form>                                                                                                  
          </div>                                                                                       
          <!--/.nav-collapse -->                                                                                                      
        </div>                                                              
      </div>                                            
    </div>                                            
    <div class="container">          	                                                               
      <!-- Main hero unit for a primary marketing message or call to action -->         	                                                                
      <div class="tabbable tabs-left">                               
        <ul class="nav nav-tabs">                                     
          <li class="active">            
            <a href="#tab1" data-toggle="tab">              
              <img class="bs-icon" src="img/glyphicons/glyphicons_043_group.png"></a>          
          </li>                     
          <li>          
          <a href="#tab2" data-toggle="tab">            
            <img class="bs-icon" src="img/glyphicons/glyphicons_155_show_thumbnails.png"></a>          
          </li> 
          <li>          
          <a href="#tab3" data-toggle="tab">            
            <img class="bs-icon" src="img/glyphicons/glyphicons_082_roundabout.png"></a>          
          </li>
          <li>          
          <a href="#tab4" data-toggle="tab">            
            <img class="bs-icon" src="img/glyphicons/glyphicons_119_adjust.png"></a>          
          </li>
          <li>          
          <a href="#tab5" data-toggle="tab">            
            <img class="bs-icon" src="img/glyphicons/glyphicons_214_resize_small.png"></a>          
          </li>
          <li>          
          <a href="#tab6" data-toggle="tab">            
            <img class="bs-icon" src="img/glyphicons/glyphicons_019_cogwheel.png"></a>          
          </li>
          <li>          
          <a href="#tab7" data-toggle="tab">            
            <img class="bs-icon" src="img/glyphicons/glyphicons_163_iphone.png"></a>          
          </li>
          <li>          
          <a href="#tab8" data-toggle="tab">            
            <img class="bs-icon" src="img/glyphicons/glyphicons_029_notes_2.png"></a>          
          </li> 
          <li>          
          <a href="#tab9" data-toggle="tab">            
            <img class="bs-icon" src="img/glyphicons/glyphicons_less_small.png"></a>          
          </li>                             
        </ul>                               
        <div class="tab-content">                        
          <div class="tab-pane active" id="tab1"><h2>Creado por y para nerds</h2>                                       
            <p>Como t&uacute;, nos encanta crear productos espectaculares en la web.      Nos gusta tanto, que decidimos ayudar a la gente como nosotros para hacerlo m&aacute;s f&aacute;cil y m&aacute;s r&aacute;pido.      Boostrap est&aacute; creado para ti.                                   
            </p>          
          </div>                    
          <div class="tab-pane" id="tab2"><h2>Grids de 12 columnas</h2>                                       
            <p>Los sistemas de grillas (grids) no har&aacute;n todo el trabajo, pero usando una grilla como esqueleto de tu trabajo har&aacute;n tu trabajo m&aacute;s simple. Usa nuestras clases para grids para crear o empieza la tuya propia.                         
            </p>          
          </div>
          <div class="tab-pane" id="tab3"><h2>Biblioteca en aumento</h2>                                       
            <p>Aunque s&oacute;lo pesa 10kb (gzipped), Boostrap es uno de los conjuntos de herramientas m&aacute;s completos con docenas de componentes funcionales completos listo para poner en uso.                         
            </p>          
          </div>
          <div class="tab-pane" id="tab4"><h2>Para todo tipo de niveles</h2>                                       
            <p>Boostrap est&aacute; dise&ntilde;ado para ayudar a la gente de todos los niveles &ndash; dise&ntilde;ador o desarrollador, un gran nerd o un principiante. Util&iacute;zalo como un conjunto completo o para empezar algo m&aacute;s complejo.                          
            </p>          
          </div>
          <div class="tab-pane" id="tab5"><h2>Dise&ntilde;o Adaptable</h2>                                       
            <p>With Bootstrap 2. nuestros componentes se adaptan y escalan seg&uacute;n las resoluciones de pantalla y dispositivos para proporcionar una experiencia consistente, no importa el qu&eacute;.
            </p>          
          </div>
          <div class="tab-pane" id="tab6"><h2>Personalizar Plugins jQuery</h2>                                       
            <p>&iquest;Qu&eacute; tiene de bueno un componente de dise&ntilde;o espectacular sin interacciones listas para usar, adecuadas y extensibles? Con Boostrap, puedes crear tu plugin de jQuery personalizado para traer tus proyectos a la vida.
            </p>          
          </div>
          <div class="tab-pane" id="tab7"><h2>Cruzando los l&iacute;mites</h2>                                       
            <p>En principio creado solo teniendo los navegadores modernos en mente, Boostrap ha evolucionado para incluir soporte para un mayor n&uacute;mero de navegadores (incluso IE7), y, con Boostrap 2, tambi&eacute;n para tabletas y smartphones.
            </p>          
          </div>
          <div class="tab-pane" id="tab8"><h2>Documentaci&oacute;n de estilos</h2>                                       
            <p>A diferencia de otros conjuntos de herramientas de front-end, Boostrap primero se dise&ntilde;&oacute; m&aacute;s como una gu&iacute;a de estilo para documentos no s&oacute;lo con nuestras caracter&iacute;sticas, pero mejora la pr&aacute;ctica y la vida.
            </p>          
          </div>
          <div class="tab-pane" id="tab9"><h2>Documentaci&oacute;n de estilos</h2>                                       
            <p>Donde CSS falla, LESS destaca. Variables, anidaciones, operaciones y mezclas en LESS hace la codificaci&oacute;n de CSS m&aacute;s r&aacute;pida y m&aacute;s eficiente con un m&iacute;nimo esfuerzo.
            </p>          
          </div>                             
        </div>                              
      </div>                                                                                       
    </div>                                                          
    <!-- Le javascript
                                        ================================================== -->                                                     
    <!-- Placed at the end of the document so the pages load faster -->                     
<script src="js/jquery.js"></script>                     
<script src="js/bootstrap-transition.js"></script>                     
<script src="js/bootstrap-alert.js"></script>                     
<script src="js/bootstrap-modal.js"></script>                     
<script src="js/bootstrap-dropdown.js"></script>                     
<script src="js/bootstrap-scrollspy.js"></script>                     
<script src="js/bootstrap-tab.js"></script>                     
<script src="js/bootstrap-tooltip.js"></script>                     
<script src="js/bootstrap-popover.js"></script>                     
<script src="js/bootstrap-button.js"></script>                     
<script src="js/bootstrap-collapse.js"></script>                     
<script src="js/bootstrap-carousel.js"></script>                     
<script src="js/bootstrap-typeahead.js"></script>                                   
  </body>
</html>